<template>
	<view>
		<view class="option-view" :style="'padding-top:'+hw.statusBarHeight+'px'">
			<view class="nav-views">
				<uni-icons type="search" color="#fff" size="30"></uni-icons>
				<view class="nav-item">
					<image src="@/static/images/zb.png" mode=""></image>
					<text>直播</text>
				</view>
			</view>
			<view class="nav-bar">
				<text>人才</text>
				<text>雇主</text>
				<text>合伙人</text>
				<text class="active">推荐</text>
				<text>关注</text>
				<switch checked style="transform: scale(0.7);" @change="changeSwitch" />
			</view>
		</view>
		<!-- <swiper class="wrapper"> -->
			
			<swiper :vertical="true" class="box" :style="'height:'+hw.height+'px'" @change="changeVideo">
				<swiper-item v-for="(item,idx) in videoList" :key="item['_id']" class="spitem">
					<view class="bg-video" :style="'width:'+hw.width+'px;height'+hw.height+'px'">
						<video class="vdplayer" 
							:id="'player' + item._id" 
							:ref="'player' + item._id" 
							:src="item.src"
							:loop="true" 
							:show-center-play-btn="true"
							@click="optionVideo(idx)"
							:style="'width:'+hw.width+'px;height:'+hw.height+'px'" />
						<image v-if="!isPlay" class="player" src="@/static/images/player.png" mode=""></image>
						<view class="right_menu">
							<view class="user_infos">
								<image :src="item.href" class="user_hp"/>
								<view class="sub-icon" v-if="!is_sub" @click="is_sub=true">
									<uni-icons type="plusempty" color="#fff" size="12"></uni-icons>
								</view>
								<view class="sub-icon" style="background: #fff;" v-else @click="is_sub=false">
									<uni-icons type="checkmarkempty" color="#f00" size="12"></uni-icons>
								</view>
							</view>
							<view @click="beFondOfClick(item,'playIng')" class="imgBox">
								<image class="spitemImage" src="@/static/images/love.png" v-if="!item.playIng" />
								<image class="spitemImage" src="@/static/images/loved.png" v-else />
								<text>{{item.like}}</text>
							</view>
							<view class="imgBox" @click="beFondOfClick(item,'isplay')">
								<image class="spitemImage" src="@/static/images/star.png" v-if="item.isplay" />
								<image class="spitemImage" src="@/static/images/stard.png" v-else />
								<text>{{item.like}}</text>
							</view>
							<view class="imgBox">
								<image class="spitemImage" src="@/static/images/zf.png" />
								<text>{{item.like}}</text>
							</view>
							<view class="imgBox">
								<image class="spitemImage" src="@/static/images/pl.png" />
								<text>{{item.like}}</text>
							</view>
							<view class="imgBox">
								<image class="spitemImage" src="@/static/images/sx.png" />
							</view>
						</view>
						<view class="bottom_info">
							<text class="user_name">{{item.username}}</text>
							<text>{{item.title}}</text>
							<text>{{item.msg}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		<!-- </swiper> -->
	</view>
</template>

<script>
	import videoApis from '@/apis/video.js'
	export default {
		data() {
			return {
				is_sub: false,
				hw: {
					width: 0,
					height: 0
				},
				currIdx: 0,
				playdId: undefined,
				isPlay: true,
				videoList: []
			}
		},
		onLoad() {
			console.log(uni.getSystemInfoSync())
			let {screenWidth,screenHeight,statusBarHeight} = uni.getSystemInfoSync();
			this.hw = {
				width: screenWidth,
				height: screenHeight - 48,
				statusBarHeight
			}
			this.getVideoList()
			
		},
		onShow() {
			if(this.playdId){
				uni.createVideoContext(this.playdId).play();
			}
		},
		watch: {
			playdId(n,o){
				n&&uni.createVideoContext(n).play();
				o&&uni.createVideoContext(o).pause();
			}
		},
		methods: {
			changeSwitch(){
				
			},
			// 播放暂停视频
			optionVideo(idx){
				if(this.currIdx===idx){
					this.isPlay = !this.isPlay;
					if(!this.isPlay){
						uni.createVideoContext(this.playdId).pause();
					}else{
						uni.createVideoContext(this.playdId).play();
					}
				}
			},
			//切换视频
			changeVideo(e){
				this.currIdx = e.detail.current;
				this.isPlay = true;
				this.playdId = 'player'+this.videoList[e.detail.current]['_id'];
			},
			// 获取视频列表
			getVideoList(){
				let that = this;
				videoApis.getVideoList()
					.then(res => {
						let { data } = res;
						that.videoList = data;
						if(data.length){
							that.playdId = 'player'+data[0]['_id'];
						}
					})
			},
			// 点赞收藏
			beFondOfClick(item,field) {
				item[field] = !item[field]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.option-view{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 999;
		box-sizing: border-box;
		padding: 0 30rpx;
		.nav-views{
			display: flex;
			align-items: center;
			.nav-item{
				display: inline-block;
				text-align: center;
				color: #fff;
				margin-left: 40rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
				text{
					font-size: 30rpx;
					display: block;
					line-height: 1;
					text-decoration: underline;
					border-top: 2rpx solid #fff;
					padding-top: 6rpx;
					position: relative;
					top: -14rpx;
				}
			}
		}
		
		.nav-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			color: #fff;
			.active{
				font-weight: bold;
			}
		}
	}
	.bg-video {
		background-color: #333;
	}
	.player{
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		pointer-events: none;
	}
	.right_menu {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
		text-align: center;
		
		.user_infos{
			position: relative;
			margin-bottom: 40rpx;
			
			.sub-icon{
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40rpx;
				height: 40rpx;
				background: #f00;
				border-radius: 50%;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				&::v-deep .uni-icons{
					position: relative;
					top: -6rpx;
				}
			}
		}

		.user_hp {
			width: 50px;
			height: 50px;
			border: 2px solid #ffffff;
			background-color: #fff;
			border-radius: 50%;
		}

		.imgBox {
			margin-bottom: 20rpx;

			.spitemImage {
				width: 70rpx;
				height: 70rpx;
			}

			text {
				display: block;
				text-align: center;
				color: #ffffff;
				font-size: 24rpx;
			}
		}

	}

	.bottom_info {
		position: absolute;
		left: 40rpx;
		z-index: 990;
		bottom: 90rpx;
		width: 60%;
		text-align: left;
		font-size: 34rpx;
		color: #fff;
		
		text{
			display: block;
		}
		
		.user_name {
			font-size: 40rpx;
		}
	}
</style>
